<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>     
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>    
<!DOCTYPE html>
<html>
<head>
<!--------------------
LOGIN FORM
by: Amit Jakhu
www.amitjakhu.com
--------------------->

<!--META-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>INICTEL-UNI | Iniciar Sesión</title>

<!--STYLESHEETS-->
<link href="css/login-style.css" rel="stylesheet" type="text/css" />
<!-- ICON PAGE -->
<link rel="shortcut icon" type="image/x-icon" href="img/inictel-icon.ico" />
<!--SCRIPTS-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="js/functions.js"></script>


</head>
<c:choose>
	<c:when test="${empty usuario}">
<body>
<!--Slider-in icons-->
<script type="text/javascript">
$(document).ready(function() {
	$(".username").focus(function() {
		$(".user-icon").css("left","-48px");
	});
	$(".username").blur(function() {
		$(".user-icon").css("left","0px");
	});
	
	$(".password").focus(function() {
		$(".pass-icon").css("left","-48px");
	});
	$(".password").blur(function() {
		$(".pass-icon").css("left","0px");
	});
});
</script>

<!--WRAPPER-->
<div class="center" style="margin: 0 auto; text-align: center; padding-top: 50px" >
<img alt="INICTEL-UNI" src="login-img/inictel-uni-logo.png" width="150px" height="150px" align="middle">
</div>
<div id="wrapper">

	<!--SLIDE-IN ICONS-->
    <div class="user-icon"></div>
    <div class="pass-icon"></div>
    <!--END SLIDE-IN ICONS-->

<!--LOGIN FORM-->
<form name="login-form" class="login-form" action="login" method="post">

	<!--HEADER-->
    <div class="header">
    <!--TITLE--><h1>Iniciar Sesión</h1><!--END TITLE-->
    <!--DESCRIPTION--><span style="color: red; text-shadow:#F56954;">${mensaje}</span><!--END DESCRIPTION-->
    </div>
    <!--END HEADER-->
	<input type="hidden" name="method" value="start">
	<!--CONTENT-->
    <div class="content">
	<!--USERNAME--><input required name="Username" name="Username" type="text" class="input username"  onfocus="this.value=''" /><!--END USERNAME-->
    <!--PASSWORD--><input required name="Password" name="Password" type="password" class="input password"  onfocus="this.value=''" /><!--END PASSWORD-->
    </div>
    <!--END CONTENT-->
    
    <!--FOOTER-->
    <div class="footer">
    <!--LOGIN BUTTON--><input type="submit" name="submit" value="Iniciar Sesión" class="button" /><!--END LOGIN BUTTON-->
    <!--REGISTER BUTTON.....<input type="submit" name="submit" value="Register" class="register" />.....--><!--END REGISTER BUTTON-->
    </div>
    <!--END FOOTER-->

</form>
<!--END LOGIN FORM-->

</div>
<!--END WRAPPER-->

<!--GRADIENT--><div class="gradient"></div><!--END GRADIENT-->
</body>
	</c:when>
		<c:otherwise>
		<body>
		<div class="text-content">
			<div class="text-center">
			Usted ya ha iniciado sesión como ${usuario}.<br> ¿Desea <a class="link" href="login?method=end">Finalizar su sesión</a> ? 
			</div>
		</div>
		</body>	
	</c:otherwise>
</c:choose>
</html>